<template>
    <div class="mask">
        <div class="upload-container">
            <!-- 左侧：裁剪区域 -->
            <el-row style="">
                <el-col :span="3"></el-col>
                <el-col :span="12">
                    <div class="left-section">
                        <!-- 使用 el-upload 组件替代 input 文件上传 -->
                        <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="handleBeforeUpload"
                            :show-file-list="false"
                            accept="image/*"
                        >
                        </el-upload>
                        
                        <!-- 图片裁剪预览 -->
                        <div v-if="imageUrl" class="crop-container">
                            <img width="100%" height="100%" ref="image" :src="imageUrl" alt="Image to crop" />
                        </div>
                        
                        <!-- 裁剪并上传按钮 -->
                        <el-button v-if="imageUrl" type="success" class="crop-button" @click="cropImage">裁剪</el-button>
                    </div>
                </el-col>
                
                <!-- 右侧：裁剪后的图片预览 -->
                <el-col :span="6">
                    <div class="right-section" v-show="croppedImage">
                        <h3>裁剪后的图片预览：</h3>
                        <img :src="croppedImage" alt="Cropped Image" class="cropped-image" />
                    </div>
                    <el-button v-show="isShowUp" type="success" class="crop-button" @click="upload">上传</el-button>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
    </div>
    
</template>

<script setup>
import {ref, nextTick, onMounted} from 'vue';
import { ElMessage } from 'element-plus';
// 安装 依赖 "cropperjs": "^1.6.2",
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

const imageUrl = ref(null);         // 上传的图片URL
const croppedImage = ref(null);     // 裁剪后的图片URL
let cropper = null;                 // Cropper实例
const isShowUp=ref(false);
const image =ref(null)


// 在 el-upload 组件中拦截文件上传，并初始化裁剪工具
const handleBeforeUpload = (file) => {
    if (!file.type.startsWith('image/')) {
        ElMessage.error('只能上传图片文件！');
        return false;
    }
    
    imageUrl.value = URL.createObjectURL(file);  // 获取图片的临时 URL
    nextTick(() => {
        initCropper();  // 初始化裁剪工具
    });
    
    // 阻止 el-upload 默认上传行为
    return false;
};

// 初始化 Cropper.js，裁剪框固定为正方形
const initCropper = () => {
    // const imageElement = document.querySelector('img');
    const imageElement = image.value;
    
    console.log(imageElement)
    if (cropper) {
        cropper.destroy();  // 如果已经有实例，先销毁
    }
    cropper = new Cropper(imageElement, {
        aspectRatio: 1,           // 固定裁剪框为正方形
        viewMode: 1,              // 保证裁剪框不会超出图片范围
        dragMode: 'move',         // 允许移动图片，而不是调整裁剪框
        cropBoxResizable: false,  // 禁止调整裁剪框大小
        cropBoxMovable: true,     // 允许移动裁剪框
        autoCropArea: 0.8,        // 初始裁剪区域占图片的比例（0-1之间）
        ready() {
            // 固定裁剪框的初始大小
            cropper.setCropBoxData({
                width: 300,  // 裁剪框宽度（可以根据需要调整）
                height: 300, // 裁剪框高度（正方形）
            });
        },
    });
};


const cimgValue=ref('')
//裁切图片的 二级制数据
const blob=ref('')


// 裁剪图片
const cropImage = () => {
   
    if (cropper) {
        cropper.getCroppedCanvas({
            width: 300,  // 裁剪后的图片宽度
            height: 300, // 裁剪后的图片高度（正方形）
        }).toBlob((blob) => {
            const reader = new FileReader();
            //将二级制数据转化为 base64的url
            reader.readAsDataURL(blob);
            reader.onloadend = () => {
                croppedImage.value = reader.result;  // 生成裁剪后的图片预览   basbase64的url赋值给dom
                cimgValue.value = croppedImage.value;  // 生成裁剪后的图片预览
                isShowUp.value=true;
                blob.value=blob;                  // 上传裁剪后的图片
            };
        }, 'image/jpeg');
    }
};

const imgUrl=ref('');
// 模拟上传裁剪后的图片
const uploadImage = (blob) => {
    const formData = new FormData();
    formData.append('file', blob, 'cropped-image.jpg');
    
    // 使用 axios 执行上传
    axios.post(BASE_URL + '/v1/file/upload', formData)
        .then(response => {
            const data = response.data;  // 响应数据
            if (data.code===2002) {
                imgUrl.value = data.data;
                props.parentMethod();
                ElMessage.success('图片上传成功！');
            } else {
                ElMessage.error('图片上传失败！');
            }
        })
        .catch(error => {
            console.error('上传错误:', error);
            ElMessage.error('上传过程中出错！');
        });
};
const upload=()=>{
    uploadImage(blob.value);
    
    return blob;
}


// 使用 defineExpose() 暴露方法
defineExpose({
    cropImage,
    upload,
    handleBeforeUpload,
    initCropper,
    cimgValue,
    blobBase64,
    imgUrl
});

// 定义 props 接收父组件的方法
const props = defineProps({
    parentMethod: Function
});




</script>

<style scoped>
.upload-container {
    width: 100vw;
    height: 50vh;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

.left-section {
    width: 700px;
    height: 500px;
}

.crop-container {
    max-width: 100%;
    max-height: 500px;
    overflow: hidden;
    margin-bottom: 20px;
}

.upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.crop-button {
    margin-top: 20px;
}

.right-section {

}

.cropped-image {
    max-width: 100%;
    border: 1px solid #ddd;
    margin-top: 10px;
}


.mask {
    position: fixed;        /* 固定定位，确保遮罩层随页面滚动不动 */
    top: 0;
    left: 0;
    width: 100vw;           /* 充满整个屏幕宽度 */
    height: 100vh;          /* 充满整个屏幕高度 */
    background-color: rgba(0, 0, 0, 0.8); /* 透明黑色背景 */
    z-index: 9999;          /* 确保在页面顶层显示 */
    display: flex;          /* 使用 flex 布局 */
    justify-content: center; /* 内容水平居中 */
    align-items: center;    /* 内容垂直居中 */
}
</style>
